<template>
    <div>
        <comment-header>萌专题</comment-header>
        <div class="bigBox" v-for="(item,index) in contentList" :key="index">
          <!-- <router-link :to="'/subject/' + item.id> -->
          <div class="smallBox" @click="goToSubItem(item)">
                <span style="color:#7f2d00;font-size:4.5vw;font-weight:600;" v-text="item.name"></span>
                <div style="padding:2vw 0;">
                       <img :src="item.banner" alt="">
                </div>
                <span style="font-size:2.5vw;color:#757575;" v-text="item.intro"></span>
          </div>
          <!-- </router-link> -->
        </div>
    </div>
</template>
<script>
import commentHeader from "../../components/comment/commentHeader"

export default {
     components:{
    commentHeader     
  },
    data(){
        return{
            page:1,
            contentList:[],
            loadingMore: false
        }
    },
    mounted() {
        this.subjectContent();
        window.onscroll = this.didscroll;
    },
    methods: {
        goToSubItem(value){
            this.$router.push({path:"/subject/detail",query:{subid:value.id}});
            window.localStorage.setItem("pet_item",JSON.stringify(value));
        },
        subjectContent:function(){
            var that = this
            this.$http.get('/pet/v2/picklist?page='+this.page+'').then(function(data){
                that.contentList = data.body.data.list
            })
        },
        didscroll(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        var contentHeight = document.body.clientHeight
        var windowHeight = window.innerHeight
        if(scrollTop + windowHeight > contentHeight -60){
            if(this.loadingMore == false){
                this.loadMore();
             
            }
        }
    },
    loadMore(){
        this.loadingMore = true
        this.page += 1
        var that = this
        var url = "/pet/v2/picklist?page="+this.page
        this.$http.get(url).then(function(data){
            that.contentList = that.contentList.concat(data.body.data.list)
            that.loadingMore = false
        })
    },
    },
}
</script>
<style scoped>
    .bigBox{
        background: white;
        padding: 1vw 0;
        text-align: left;
        
    }
    .smallBox{
        width: 90vw;
        margin: 0 auto;
        border-bottom: 1px solid #f1f1f1;
        padding-bottom: 4vw;
        margin-bottom: 3.5vw;
    }
    .smallBox img{
        width: 100%;
    
    }
</style>
